<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="format-detection" content="telephone=no">
    <title>打地鼠游戏</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
            font-family: 'Arial', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden;
            /* 移动端优化 */
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }
        
        .game-container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            text-align: center;
            max-width: 900px;
            width: 90%;
        }
        
        .game-title {
            font-size: 3em;
            color: #2d3436;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
            background: linear-gradient(45deg, #e17055, #fdcb6e);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .game-info {
            display: flex;
            justify-content: space-around;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }
        
        .info-item {
            background: #f8f9fa;
            padding: 15px 25px;
            border-radius: 15px;
            margin: 5px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }
        
        .info-item:hover {
            transform: translateY(-2px);
        }
        
        .info-label {
            font-size: 0.9em;
            color: #666;
            margin-bottom: 5px;
        }
        
        .info-value {
            font-size: 1.5em;
            font-weight: bold;
            color: #2d3436;
        }
        
        .game-board {
            background: linear-gradient(135deg, #8b4513 0%, #a0522d 100%);
            border-radius: 20px;
            padding: 30px;
            margin: 20px 0;
            min-height: 500px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            gap: 30px;
            position: relative;
            box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.3);
        }
        
        .hole {
            width: 120px;
            height: 120px;
            background: radial-gradient(circle, #2c1810 0%, #1a0e08 100%);
            border-radius: 50%;
            position: relative;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: inset 0 8px 16px rgba(0, 0, 0, 0.8);
            border: 4px solid #3e2723;
            /* 移动端优化 */
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }
        
        .hole:active {
            transform: scale(0.95);
        }
        
        .hole:focus {
            outline: none;
        }
        
        .hole:hover {
            transform: scale(1.05);
        }
        
        .mole {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #8d4004 0%, #bf6000 100%);
            border-radius: 50% 50% 45% 45%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            transition: transform 0.3s ease;
            cursor: pointer;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            z-index: 2;
            /* 移动端优化 */
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }
        
        .mole:active {
            transform: translate(-50%, -50%) scale(0.9);
        }
        
        .mole:focus {
            outline: none;
        }
        
        .mole::before {
            content: '';
            position: absolute;
            width: 15px;
            height: 15px;
            background: #000;
            border-radius: 50%;
            top: 25px;
            left: 20px;
            box-shadow: 25px 0 0 #000;
        }
        
        .mole::after {
            content: '';
            position: absolute;
            width: 20px;
            height: 8px;
            background: #000;
            border-radius: 10px;
            top: 45px;
            left: 30px;
        }
        
        .mole.show {
            transform: translate(-50%, -50%) scale(1);
        }
        
        .mole.hit {
            transform: translate(-50%, -50%) scale(0);
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
        }
        
        .mole.golden {
            background: linear-gradient(135deg, #f1c40f 0%, #f39c12 100%);
            box-shadow: 0 0 20px rgba(241, 196, 15, 0.6);
        }
        
        .mole.golden::before {
            background: #8b4513;
            box-shadow: 25px 0 0 #8b4513;
        }
        
        .mole.golden::after {
            background: #8b4513;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
            flex-wrap: wrap;
        }
        
        .btn {
            padding: 15px 30px;
            font-size: 1.1em;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            /* 移动端优化 */
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }
        
        .btn:active {
            transform: scale(0.95);
        }
        
        .btn:focus {
            outline: none;
        }
        
        .btn-primary {
            background: linear-gradient(45deg, #00b894, #00a085);
            color: white;
            box-shadow: 0 4px 15px rgba(0, 184, 148, 0.4);
        }
        
        .btn-primary:hover {
            background: linear-gradient(45deg, #00a085, #00b894);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 184, 148, 0.6);
        }
        
        .btn-secondary {
            background: linear-gradient(45deg, #fd79a8, #e84393);
            color: white;
            box-shadow: 0 4px 15px rgba(253, 121, 168, 0.4);
        }
        
        .btn-secondary:hover {
            background: linear-gradient(45deg, #e84393, #fd79a8);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(253, 121, 168, 0.6);
        }
        
        .btn-warning {
            background: linear-gradient(45deg, #fdcb6e, #e17055);
            color: white;
            box-shadow: 0 4px 15px rgba(253, 203, 110, 0.4);
        }
        
        .btn-warning:hover {
            background: linear-gradient(45deg, #e17055, #fdcb6e);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(253, 203, 110, 0.6);
        }
        
        .message {
            margin-top: 20px;
            padding: 15px;
            border-radius: 10px;
            font-weight: bold;
            font-size: 1.1em;
            min-height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .message.success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .message.error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .message.info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        
        .score-popup {
            position: absolute;
            font-size: 1.5em;
            font-weight: bold;
            color: #00b894;
            pointer-events: none;
            z-index: 10;
            animation: scoreFloat 1s ease-out forwards;
        }
        
        @keyframes scoreFloat {
            0% {
                opacity: 1;
                transform: translateY(0);
            }
            100% {
                opacity: 0;
                transform: translateY(-50px);
            }
        }
        
        .difficulty-selector {
            margin: 20px 0;
            display: flex;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
        }
        
        .difficulty-btn {
            padding: 10px 20px;
            border: 2px solid #ddd;
            background: white;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
            /* 移动端优化 */
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }
        
        .difficulty-btn:active {
            transform: scale(0.95);
        }
        
        .difficulty-btn:focus {
            outline: none;
        }
        
        .difficulty-btn.active {
            background: #00b894;
            color: white;
            border-color: #00b894;
        }
        
        .difficulty-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        
        @media (max-width: 768px) {
            .game-container {
                padding: 20px;
                width: 95%;
            }
            
            .game-title {
                font-size: 2em;
                margin-bottom: 15px;
            }
            
            .game-info {
                margin-bottom: 20px;
            }
            
            .info-item {
                padding: 10px 15px;
                margin: 3px;
            }
            
            .info-label {
                font-size: 0.8em;
            }
            
            .info-value {
                font-size: 1.2em;
            }
            
            .game-board {
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: repeat(3, 1fr);
                gap: 15px;
                padding: 15px;
                min-height: 400px;
            }
            
            .hole {
                width: 80px;
                height: 80px;
            }
            
            .mole {
                width: 60px;
                height: 60px;
            }
            
            .mole::before {
                width: 10px;
                height: 10px;
                top: 18px;
                left: 15px;
                box-shadow: 20px 0 0 #000;
            }
            
            .mole::after {
                width: 15px;
                height: 6px;
                top: 35px;
                left: 22px;
            }
            
            .controls {
                gap: 10px;
                margin-top: 20px;
            }
            
            .btn {
                padding: 12px 20px;
                font-size: 1em;
            }
            
            .difficulty-selector {
                gap: 10px;
            }
            
            .difficulty-btn {
                padding: 8px 15px;
                font-size: 0.9em;
            }
        }
        
        @media (max-width: 480px) {
            .game-container {
                padding: 15px;
                width: 98%;
            }
            
            .game-title {
                font-size: 1.5em;
                margin-bottom: 10px;
            }
            
            .game-info {
                margin-bottom: 15px;
            }
            
            .info-item {
                padding: 8px 12px;
                margin: 2px;
            }
            
            .info-label {
                font-size: 0.7em;
            }
            
            .info-value {
                font-size: 1em;
            }
            
            .game-board {
                gap: 10px;
                padding: 10px;
                min-height: 300px;
            }
            
            .hole {
                width: 70px;
                height: 70px;
            }
            
            .mole {
                width: 50px;
                height: 50px;
            }
            
            .mole::before {
                width: 8px;
                height: 8px;
                top: 15px;
                left: 12px;
                box-shadow: 18px 0 0 #000;
            }
            
            .mole::after {
                width: 12px;
                height: 5px;
                top: 30px;
                left: 19px;
            }
            
            .controls {
                gap: 8px;
                margin-top: 15px;
            }
            
            .btn {
                padding: 10px 15px;
                font-size: 0.9em;
            }
            
            .difficulty-selector {
                gap: 8px;
            }
            
            .difficulty-btn {
                padding: 6px 12px;
                font-size: 0.8em;
            }
            
            .message {
                font-size: 1em;
                padding: 10px;
            }
        }
        
        @media (max-width: 320px) {
            .game-title {
                font-size: 1.2em;
            }
            
            .game-board {
                gap: 8px;
                padding: 8px;
                min-height: 250px;
            }
            
            .hole {
                width: 60px;
                height: 60px;
            }
            
            .mole {
                width: 40px;
                height: 40px;
            }
            
            .mole::before {
                width: 6px;
                height: 6px;
                top: 12px;
                left: 10px;
                box-shadow: 14px 0 0 #000;
            }
            
            .mole::after {
                width: 10px;
                height: 4px;
                top: 24px;
                left: 15px;
            }
            
            .btn {
                padding: 8px 12px;
                font-size: 0.8em;
            }
        }
    </style>
</head>
<body>
    <div class="game-container">
        <h1 class="game-title">🔨 打地鼠游戏 🐹</h1>
        
        <div class="game-info">
            <div class="info-item">
                <div class="info-label">分数</div>
                <div class="info-value" id="score">0</div>
            </div>
            <div class="info-item">
                <div class="info-label">时间</div>
                <div class="info-value" id="time">60</div>
            </div>
            <div class="info-item">
                <div class="info-label">最高分</div>
                <div class="info-value" id="highScore">0</div>
            </div>
            <div class="info-item">
                <div class="info-label">连击</div>
                <div class="info-value" id="combo">0</div>
            </div>
        </div>
        
        <div class="difficulty-selector">
            <div class="difficulty-btn active" data-difficulty="easy">简单</div>
            <div class="difficulty-btn" data-difficulty="medium">中等</div>
            <div class="difficulty-btn" data-difficulty="hard">困难</div>
        </div>
        
        <div class="game-board" id="gameBoard">
            <!-- 地鼠洞将在这里动态生成 -->
        </div>
        
        <div class="controls">
            <button class="btn btn-primary" onclick="startGame()">开始游戏</button>
            <button class="btn btn-secondary" onclick="pauseGame()">暂停</button>
            <button class="btn btn-warning" onclick="resetGame()">重置</button>
        </div>
        
        <div class="message info" id="message">
            选择难度并点击"开始游戏"来开始打地鼠！
        </div>
    </div>

    <script>
        // 游戏状态
        let gameState = {
            score: 0,
            time: 60,
            highScore: localStorage.getItem('whackMoleHighScore') || 0,
            combo: 0,
            isPlaying: false,
            isPaused: false,
            difficulty: 'easy',
            moleTimer: null,
            gameTimer: null,
            holes: [],
            activeMoles: new Set()
        };

        // 难度设置
        const difficultySettings = {
            easy: { moleSpeed: 1500, moleUpTime: 1000, goldenChance: 0.05 },
            medium: { moleSpeed: 1200, moleUpTime: 800, goldenChance: 0.1 },
            hard: { moleSpeed: 900, moleUpTime: 600, goldenChance: 0.15 }
        };

        // 初始化游戏
        function initGame() {
            createBoard();
            updateDisplay();
            setupDifficultyButtons();
        }

        // 创建游戏板
        function createBoard() {
            const board = document.getElementById('gameBoard');
            board.innerHTML = '';
            gameState.holes = [];
            
            for (let i = 0; i < 9; i++) {
                const hole = document.createElement('div');
                hole.className = 'hole';
                hole.dataset.index = i;
                
                const mole = document.createElement('div');
                mole.className = 'mole';
                
                // 添加点击和触摸事件
                mole.addEventListener('click', (e) => {
                    e.preventDefault();
                    whackMole(i);
                });
                
                mole.addEventListener('touchstart', (e) => {
                    e.preventDefault();
                    whackMole(i);
                }, { passive: false });
                
                // 优化触摸区域
                mole.style.touchAction = 'manipulation';
                hole.style.touchAction = 'manipulation';
                
                hole.appendChild(mole);
                board.appendChild(hole);
                gameState.holes.push({ hole, mole });
            }
        }

        // 设置难度按钮
        function setupDifficultyButtons() {
            const buttons = document.querySelectorAll('.difficulty-btn');
            buttons.forEach(btn => {
                // 添加点击和触摸事件
                btn.addEventListener('click', (e) => {
                    e.preventDefault();
                    buttons.forEach(b => b.classList.remove('active'));
                    btn.classList.add('active');
                    gameState.difficulty = btn.dataset.difficulty;
                    showMessage(`难度设置为：${btn.textContent}`, 'info');
                });
                
                btn.addEventListener('touchstart', (e) => {
                    e.preventDefault();
                    buttons.forEach(b => b.classList.remove('active'));
                    btn.classList.add('active');
                    gameState.difficulty = btn.dataset.difficulty;
                    showMessage(`难度设置为：${btn.textContent}`, 'info');
                }, { passive: false });
                
                // 优化触摸体验
                btn.style.touchAction = 'manipulation';
            });
        }

        // 开始游戏
        function startGame() {
            if (gameState.isPlaying && !gameState.isPaused) return;
            
            if (gameState.isPaused) {
                resumeGame();
                return;
            }
            
            gameState.isPlaying = true;
            gameState.isPaused = false;
            gameState.score = 0;
            gameState.time = 60;
            gameState.combo = 0;
            gameState.activeMoles.clear();
            
            // 隐藏所有地鼠
            gameState.holes.forEach(({ mole }) => {
                mole.classList.remove('show', 'hit', 'golden');
            });
            
            updateDisplay();
            startGameTimer();
            startMoleSpawning();
            showMessage('游戏开始！快速点击地鼠来得分！', 'success');
        }

        // 暂停游戏
        function pauseGame() {
            if (!gameState.isPlaying || gameState.isPaused) return;
            
            gameState.isPaused = true;
            clearInterval(gameState.gameTimer);
            clearTimeout(gameState.moleTimer);
            showMessage('游戏已暂停', 'info');
        }

        // 继续游戏
        function resumeGame() {
            gameState.isPaused = false;
            startGameTimer();
            startMoleSpawning();
            showMessage('游戏继续！', 'success');
        }

        // 重置游戏
        function resetGame() {
            gameState.isPlaying = false;
            gameState.isPaused = false;
            gameState.score = 0;
            gameState.time = 60;
            gameState.combo = 0;
            gameState.activeMoles.clear();
            
            clearInterval(gameState.gameTimer);
            clearTimeout(gameState.moleTimer);
            
            // 隐藏所有地鼠
            gameState.holes.forEach(({ mole }) => {
                mole.classList.remove('show', 'hit', 'golden');
            });
            
            updateDisplay();
            showMessage('游戏已重置，点击"开始游戏"重新开始！', 'info');
        }

        // 开始游戏计时器
        function startGameTimer() {
            gameState.gameTimer = setInterval(() => {
                gameState.time--;
                updateDisplay();
                
                if (gameState.time <= 0) {
                    endGame();
                }
            }, 1000);
        }

        // 开始地鼠生成
        function startMoleSpawning() {
            if (!gameState.isPlaying || gameState.isPaused) return;
            
            spawnMole();
            
            const settings = difficultySettings[gameState.difficulty];
            gameState.moleTimer = setTimeout(() => {
                startMoleSpawning();
            }, settings.moleSpeed + Math.random() * 500);
        }

        // 生成地鼠
        function spawnMole() {
            if (!gameState.isPlaying || gameState.isPaused) return;
            
            const availableHoles = gameState.holes
                .map((_, index) => index)
                .filter(index => !gameState.activeMoles.has(index));
            
            if (availableHoles.length === 0) return;
            
            const holeIndex = availableHoles[Math.floor(Math.random() * availableHoles.length)];
            const { mole } = gameState.holes[holeIndex];
            
            const settings = difficultySettings[gameState.difficulty];
            const isGolden = Math.random() < settings.goldenChance;
            
            mole.classList.add('show');
            if (isGolden) {
                mole.classList.add('golden');
            }
            
            gameState.activeMoles.add(holeIndex);
            
            // 地鼠自动消失
            setTimeout(() => {
                if (gameState.activeMoles.has(holeIndex)) {
                    mole.classList.remove('show', 'golden');
                    gameState.activeMoles.delete(holeIndex);
                    gameState.combo = 0; // 重置连击
                    updateDisplay();
                }
            }, settings.moleUpTime);
        }

        // 打地鼠
        function whackMole(holeIndex) {
            if (!gameState.isPlaying || gameState.isPaused) return;
            
            const { mole } = gameState.holes[holeIndex];
            
            if (!mole.classList.contains('show') || gameState.activeMoles.has(holeIndex) === false) return;
            
            const isGolden = mole.classList.contains('golden');
            const points = isGolden ? 50 : 10;
            
            // 增加连击
            gameState.combo++;
            const comboBonus = Math.floor(gameState.combo / 5) * 5;
            const totalPoints = points + comboBonus;
            
            gameState.score += totalPoints;
            
            // 显示得分动画
            showScorePopup(mole, totalPoints);
            
            // 地鼠被击中效果
            mole.classList.add('hit');
            mole.classList.remove('show', 'golden');
            gameState.activeMoles.delete(holeIndex);
            
            setTimeout(() => {
                mole.classList.remove('hit');
            }, 300);
            
            updateDisplay();
        }

        // 显示得分弹出
        function showScorePopup(mole, points) {
            const popup = document.createElement('div');
            popup.className = 'score-popup';
            popup.textContent = `+${points}`;
            popup.style.left = '50%';
            popup.style.top = '50%';
            popup.style.transform = 'translate(-50%, -50%)';
            
            mole.parentElement.appendChild(popup);
            
            setTimeout(() => {
                popup.remove();
            }, 1000);
        }

        // 结束游戏
        function endGame() {
            gameState.isPlaying = false;
            clearInterval(gameState.gameTimer);
            clearTimeout(gameState.moleTimer);
            
            // 更新最高分
            if (gameState.score > gameState.highScore) {
                gameState.highScore = gameState.score;
                localStorage.setItem('whackMoleHighScore', gameState.highScore);
                showMessage(`🎉 新纪录！最终得分：${gameState.score}`, 'success');
            } else {
                showMessage(`游戏结束！最终得分：${gameState.score}`, 'info');
            }
            
            // 隐藏所有地鼠
            gameState.holes.forEach(({ mole }) => {
                mole.classList.remove('show', 'golden');
            });
            
            gameState.activeMoles.clear();
            updateDisplay();
        }

        // 更新显示
        function updateDisplay() {
            document.getElementById('score').textContent = gameState.score;
            document.getElementById('time').textContent = gameState.time;
            document.getElementById('highScore').textContent = gameState.highScore;
            document.getElementById('combo').textContent = gameState.combo;
        }

        // 显示消息
        function showMessage(text, type = 'info') {
            const messageEl = document.getElementById('message');
            messageEl.textContent = text;
            messageEl.className = `message ${type}`;
        }

        // 页面加载完成后初始化游戏
        window.onload = initGame;
    </script>
</body>
</html>